<template>
  <div class="page-wrapper">
    <a-tabs v-model:activeKey="activeKey" :style="{ height: '100%' }">
      <a-tab-pane key="income" tab="收入">
        <a-list :data-source="incomeListData">
          <template #renderItem="{ item }">
            <div :style="{ padding: '12px 26px', position: 'relative' }">
              <a-flex
                :style="{
                  color: '#353535',
                  fontSize: '13px',
                  lineHeight: '18px',
                  marginBottom: '12px',
                }"
                justify="space-between"
              >
                <span>{{ item.description }}</span>
                <span>+{{ item.workCoinCount }} 工币</span>
              </a-flex>
              <div :style="{ color: '#A1A4AB', fontSize: '12px', lineHeight: '17px' }">
                {{ item.datetime }}
              </div>
              <div
                :style="{
                  width: 'calc(100% - 52px)',
                  height: '1px',
                  backgroundColor: '#efefef',
                  position: 'absolute',
                  bottom: 0,
                }"
              ></div>
            </div>
          </template>
        </a-list>
      </a-tab-pane>
      <a-tab-pane key="disburse" tab="支出">
        <a-list :data-source="disburseListData">
          <template #renderItem="{ item }">
            <div :style="{ padding: '12px 26px', position: 'relative' }">
              <a-flex
                :style="{
                  color: '#353535',
                  fontSize: '13px',
                  lineHeight: '18px',
                  marginBottom: '12px',
                }"
                justify="space-between"
              >
                <span>{{ item.description }}</span>
                <span>-{{ item.workCoinCount }} 工币</span>
              </a-flex>
              <div :style="{ color: '#A1A4AB', fontSize: '12px', lineHeight: '17px' }">
                {{ item.datetime }}
              </div>
              <div
                :style="{
                  width: 'calc(100% - 52px)',
                  height: '1px',
                  backgroundColor: '#efefef',
                  position: 'absolute',
                  bottom: 0,
                }"
              ></div>
            </div>
          </template>
        </a-list>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const activeKey = ref('income')

const incomeListData = new Array(10).fill(0).map((_, i) => {
  const targetDate = new Date()
  targetDate.setDate(new Date().getDate() - i - 1)
  return {
    description: '工币兑换',
    workCoinCount: Math.ceil((1 - Math.random()) * 5 + 5),
    datetime: [
      targetDate
        .toLocaleDateString()
        .split('/')
        .map(($) => $.padStart(2, '0'))
        .join('-'),
      ['18', String(Math.floor(Math.random() * 60)), String(Math.floor(Math.random() * 60))]
        .map(($) => $.padStart(2, '0'))
        .join(':'),
    ].join(' '),
  }
})

const disburseListData = new Array(10).fill(0).map((_, i) => {
  const targetDate = new Date()
  targetDate.setDate(new Date().getDate() - i - 1)
  return {
    description: '工币提取',
    workCoinCount: Math.ceil((1 - Math.random()) * 5),
    datetime: [
      targetDate
        .toLocaleDateString()
        .split('/')
        .map(($) => $.padStart(2, '0'))
        .join('-'),
      [
        String(Math.floor(Math.random() * 10) + 12),
        String(Math.floor(Math.random() * 60)),
        String(Math.floor(Math.random() * 60)),
      ]
        .map(($) => $.padStart(2, '0'))
        .join(':'),
    ].join(' '),
  }
})
</script>

<style lang="less" scoped>
.page-wrapper {
  height: 100%;
}
.ant-tabs::v-deep {
  .ant-tabs-nav {
    margin-bottom: 0;
    .ant-tabs-nav-wrap {
      padding: 16px 12px;
      .ant-tabs-tab {
        padding: 0;
        margin: 0 15px;
        font-size: 15px;
        line-height: 21px;
        color: #a1a4ab;
        .ant-tabs-tab-btn:focus,
        .ant-tabs-tab-btn:active {
          color: #fd436a;
        }
      }
      .ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #fd436a;
        }
      }
    }
    .ant-tabs-ink-bar {
      bottom: -4px;
      background-color: #fd436a;
    }
  }
  .ant-tabs-content-holder {
    background-color: #fbfbfb;
    .ant-tabs-content {
      height: 100%;
      .ant-tabs-tabpane {
        height: 100%;
        overflow-y: auto;
      }
      .ant-tabs-tabpane::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
